<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>节点背景使用图片</title>
</head>

<body>
    <div id="mountNode"></div>
    <script src="../build/g6.js"></script>
    <script>
      /**
       * 本示例演示以下功能：
       * 1、如何使用图片作为节点背景；
       * 2、点击切换节点背景图片。
       * 
      */
      G6.registerNode('circleNode', {
        drawShape(cfg, group) {
          const keyShape = group.addShape('circle', {
            attrs: {
              x: 0,
              y: 0,
              r: 30,
              fill: '#87e8de'
            }
          });

          return keyShape;
        }
      }, 'circle');
      
      const img = new Image();
      img.src = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566553535233&di=b0b17eeea7bd7356a6f42ebfd48e9441&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F64%2F29%2F01300543361379145388299988437_s.jpg';

      // 点击图片节点，切换背景图片
      const img2 = new Image();
      img2.src = 'http://seopic.699pic.com/photo/50055/5642.jpg_wh1200.jpg';
      const data = {
          nodes: [
            {
              x: 100,
              y: 100,
              shape: 'circleNode',
              label: 'circle',
              id:'node1',
              labelCfg: {
                position: 'center'
              }
            },
            {
              x: 400,
              y: 100,
              shape: 'image',
              id:'node2',
              img: img.src ,
              label: '头像',
              style: {
                cursor: 'pointer'
              },
              labelCfg: {
                position: 'bottom'
              }
            }
          ],
          edges: [
              {
                  source: 'node1',
                  target: 'node2',
                  label: 'line',
                  labelCfg: {
                    refY: 10
                  }
              }
          ]
      };
      // 避免拖动过程中闪烁：使用加载已经LOAD好的图片
      img.onload = function() {
          const graph = new G6.Graph({
          container: 'mountNode',
          width: 1000,
          height: 600,
          defaultEdge: {
            color: '#bae7ff'
          },
          modes: {
                  default: ['drag-node', {
                      type: 'drag-node',
                  }],
              }
          });
          graph.data(data);
          graph.render(); 

          graph.on('node:click', evt => {
            const { target } = evt;
            const type = target.get('type');
            const hasChangeBg = target.get('hasChangeBg');
            console.log(target)
            if(type === 'image') {
              if(!hasChangeBg) {
                // 点击图片节点时，切换背景图片
                target.attr('img', img2);
                target.attr('imgSrc', 'http://seopic.699pic.com/photo/50055/5642.jpg_wh1200.jpg')
                target.set('hasChangeBg', true);
              } else {
                target.attr('img', img);
                target.attr('imgSrc', 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566553535233&di=b0b17eeea7bd7356a6f42ebfd48e9441&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F64%2F29%2F01300543361379145388299988437_s.jpg')
                target.set('hasChangeBg', false);
              }
              graph.paint()
            }
          })
      };
        
    </script>
</body>

</html>